<!--
 * @Description: 
 * @Date: 2023-04-17 10:56:02
 * @LastEditors: czp
 * @LastEditTime: 2023-05-09 15:02:37
-->
<template>
	<img class="bg" :src="cosPrefix + 'two-level/xiangmeng/i2.jpg'" alt="" srcset="" />
	<div class="breadcrumb">
		<el-breadcrumb class="left" separator=">">
			<el-breadcrumb-item :to="{ path: HOME_PATH }">
				<IEpHomeFilled />
			</el-breadcrumb-item>
			<el-breadcrumb-item :to="breakPoint != 'xs' && '/xiang-meng/detail'">乡梦荆竹</el-breadcrumb-item>
			<el-breadcrumb-item>热门游记</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

	<div v-if="newsId != 1" class="news-detail">
		<div class="title">{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l1") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l2") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l3") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l4") }}</div>
		<!-- <img src="@/assets/images/youji/1.jpg" /> -->
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l5") }}
		</div>
		<!-- <img src="@/assets/images/youji/2.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l6") }}</div>
		<!-- <img src="@/assets/images/youji/3.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l7") }}</div>
		<!-- <img src="@/assets/images/youji/4.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l8") }}</div>
		<!-- <img src="@/assets/images/youji/5.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l9") }}</div>
		<!-- <img src="@/assets/images/youji/6.jpg" alt="" /> -->
		<!-- <img src="@/assets/images/youji/7.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l10") }}</div>
		<!-- <img src="@/assets/images/youji/8.jpg" alt="" /> -->
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l11") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l12") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l13") }}</div>
		<img :src="cosPrefix + 'youji/laomao/1.1.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l14") }}</div>
		<img :src="cosPrefix + 'youji/laomao/2.2.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l15") }}</div>
		<img :src="cosPrefix + 'youji/laomao/3.3.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l16") }}</div>
		<img :src="cosPrefix + 'youji/laomao/4.4.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l17") }}</div>
		<img :src="cosPrefix + 'youji/laomao/5.5.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l18") }}</div>
		<img :src="cosPrefix + 'youji/laomao/6.6.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l19") }}</div>
		<img :src="cosPrefix + 'youji/laomao/7.7.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l20") }}</div>
		<img :src="cosPrefix + 'youji/laomao/8.8.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l21") }}</div>

		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l22") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l23") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l24") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l25") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l26") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l27") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l28") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l29") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l30") }}</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l31") }}
		</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l32") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l33") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l34") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l35") }}</div>
		<img :src="cosPrefix + 'youji/laomao/8.8.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l36") }}</div>
		<img :src="cosPrefix + 'youji/laomao/9.9.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l37") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l40") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l38") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l39") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l41") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l42") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l43") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l44") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l45") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l46") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l47") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l48") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l49") }}</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l50") }}
		</div>

		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l51") }}</div>
		<img :src="cosPrefix + 'youji/laomao/10.10.jpeg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l52") }}</div>
		<img :src="cosPrefix + 'youji/laomao/11.11.jpeg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l53") }}</div>
		<img :src="cosPrefix + 'youji/laomao/12.12.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l54") }}</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l55") }}
		</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l56") }}</div>
		<img :src="cosPrefix + 'youji/laomao/13.13.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l57") }}</div>
		<img :src="cosPrefix + 'youji/laomao/14.14.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l58") }}</div>
		<img :src="cosPrefix + 'youji/laomao/15.15.jpeg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l59") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l60") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l64") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l62") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l63") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l64") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l65") }}</div>
		<img :src="cosPrefix + 'youji/laomao/16.16.1.png'" alt="" />
		<img :src="cosPrefix + 'youji/laomao/16.16.2.png'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l66") }}</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l67") }}</div>
	</div>
	<div v-else class="news-detail">
		<div class="title">{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.title2") }}</div>
		<img :src="cosPrefix + 'youji/zuijialvyouxiangcun/1.jpg'" alt="" />
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.name2") }}</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l68") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l69") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l70") }}
		</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l71") }}</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l72") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l73") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l74") }}
		</div>

		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l75") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l76") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l77") }}
		</div>
		<div>
			{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l78") }}
		</div>
		<div>{{ $t("xiangmeng.xiang-you-quan.jiao-liu.you-ji.l79") }}</div>
		<img :src="cosPrefix + 'youji/zuijialvyouxiangcun/2.png'" alt="" />
	</div>
</template>
<script setup lang="ts" name="NewsDetail">
import { useBaseStore } from "@/store/base";
import { HOME_PATH } from "@/enums/routerEnum";
const { cosPrefix } = useBaseStore();
const { breakPoint } = storeToRefs(useBaseStore());
const route = useRoute();
const newsId = ref();
onActivated(() => {
	newsId.value = Number(route.query.id);
});
</script>
<style lang="scss" scoped>
@media all and (max-width: 750px) {
	.bg {
		width: 100%;
		height: 200px;
		margin: 0;
	}
	.news-detail {
		padding: 16px;
		font-size: 20px;
		.title {
			margin-bottom: 20px;
			font-size: 24px;
			font-weight: bold;
		}
	}
	img {
		display: block;
		width: 100%;
		margin: 20px auto;
	}
	div {
		margin-bottom: 20px;
	}
}

@media all and (min-width: 750px) {
	.bg {
		width: 100%;
		height: 500px;
		margin: 0;
	}
	.breadcrumb {
		padding: 16px 380px;
	}
	.news-detail {
		padding: 80px 380px;
		padding-top: 20px;
		font-size: 20px;
		.title {
			margin-bottom: 40px;
			font-size: 32px;
			font-weight: 700;
			color: #333333;
			text-align: center;
		}
	}
	img {
		display: block;
		width: 800px;
		margin: 20px auto;
	}
	div {
		margin-bottom: 20px;
	}
	:deep(.el-breadcrumb) {
		font-size: 18px !important;
		color: #333333;
		.el-breadcrumb__inner {
			color: #8a1313;
		}
		.is-link {
			color: #333333;
		}
	}
}
</style>
